<template>
  <div class="container" v-loading="!show">
    <!-- 四情监控 -->
    <div class="monitor">
      <div class="monitorList">
        <div class="monitor-panel" v-for="(item,index) in list" :key="index" ref="monitorPanel">
          <EZUIKitJs v-if="show" :id="item.id" :channelNo="item.channelNo" :deviceSerial="item.deviceSerial"
                     :width="monitorWidth" :height="(monitorWidth * 2) / 3"></EZUIKitJs>
        </div>
      </div>
      <pagination v-if="total> 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
                  @pagination="getList" class="pagination" :layout="'total, prev, pager, next, jumper'"/>
    </div>
  </div>
</template>

<script>
import EZUIKitJs from '@/components/EZUIKitJs'
import { debounce } from 'throttle-debounce'

export default {
  components: {
    EZUIKitJs
  },
  data() {
    return {
      // 总条数
      total: 6,
      queryParams: {
        pageNo: 1,
        pageSize: 6
      },
      list: [
        {
          id: '9c055ea3298f413f889deef240807fb0',
          channelNo: 3,
          deviceSerial: 'L16595996'
        },
        {
          id: 'dde1086f119740ad9af2aed8acf57adb',
          channelNo: 6,
          deviceSerial: 'L16595996'
        },
        {
          id: 'f2ccd2e008a745e0a6fbe9848ced695e',
          channelNo: 9,
          deviceSerial: 'L16595996'
        },
        {
          id: '23ad8952cfde4055b1d6c53428021aa2',
          channelNo: 12,
          deviceSerial: 'L16595996'
        },
        {
          id: 'cffefd152fd04fe096cda4c97ffa5c09',
          channelNo: 15,
          deviceSerial: 'L16595996'
        },
        {
          id: '64314e38654842359acd3d8a078b2a70',
          channelNo: 19,
          deviceSerial: 'L16595996'
        }
      ],
      show: false,
      monitorWidth: 0
    }
  },
  created() {
    window.addEventListener('resize', this.resizeFn)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resizeFn)
  },
  mounted() {
    this.resizeFn()
  },
  methods: {
    getList() {
    },
    resizeFn: debounce(2000, function() {
      this.show = false
      this.$nextTick(() => {
        this.monitorWidth = this.$refs.monitorPanel[0].offsetWidth
        this.show = true
      })
    })
  }

}
</script>

<style lang="scss" scoped>
.container {
  padding: 24px;
  background-color: rgb(240, 242, 245);
  min-height: calc(100vh - 86px);

  .monitorList {
    display: flex;
    flex-flow: wrap;

    .monitor-panel {
      width: calc((100% + 20px) / 3 - 20px);
      margin-right: 20px;
      margin-bottom: 20px;
      overflow: hidden;

      &:nth-child(3n) {
        margin-right: 0px;
      }
    }
  }

  .pagination {
    margin: 30px auto;
    width: 500px;
    background: rgb(240, 242, 245);
    color: #00afff;
  }
}
</style>
